﻿<template>
  <el-dialog v-drag :title = 'dialogUploadTitle' :visible.sync = 'dialogUploadVisible' width='40%' :before-close = "handleClose">
    <div v-loading = 'loading'>
      <el-upload ref = 'upload' :action = 'actionUrl' :file-list = 'fileList' :limit='1' :auto-upload = "false" drag
      :on-exceed = 'onExceed' :http-request = 'httpRequest' :on-change = 'changeFileUpload' :on-remove = 'removeUploadFile'>
        <i class = "el-icon-upload"></i>
        <div class = "el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <span slot = "footer">
      <el-button type='info' @click = "handleClose">取 消</el-button>
      <el-button type="primary" @click = 'handleSubmit'>确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['showUploadDialog', 'funUid'],
  data () {
    return {
      dialogUploadVisible: false,
      dialogUploadTitle: '选择需要上传的文件',
      // 上传部分
      actionUrl: '',
      fileList: [],
      fileReader: '',
      hadFile: false,
      loading: false
    }
  },
  mounted () {
    if (!window.FileReader) {
      this.$message({
        message: '您的浏览器不支持 FileReader API',
        type: 'warning'
      })
    } else {
      this.fileReader = new FileReader()
    }
  },
  methods: {
    // 上传文件时
    httpRequest (options) {
      let file = options.file
      let filename = file.name
      if (file) {
        this.fileReader.readAsDataURL(file)
      }
      this.fileReader.onload = () => {
        let base64Str = this.fileReader.result
        this.loading = true
        this.$post('/s_table/' + this.funUid + '/import', {
          file_name: filename,
          file_content: base64Str.split(',')[1]
        }).then(data => {
          if (data.data.result.code === 'success') {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            this.$refs.upload.clearFiles()
            this.fileList = []
            this.hadFile = false
            this.$emit('closeUploadDialog')
          } else {
            this.$message({
              message: data.data.result.msg,
              type: 'warning'
            })
          }
          this.loading = false
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    // 文件超过最大上传个数时
    onExceed (files, fileList) {
      this.$message({
        message: '一次只能上传一个文件，请先移除文件列表中的文件，在选择需要上传的文件',
        type: 'warning'
      })
    },
    // 上传文件改变
    changeFileUpload () {
      this.hadFile = true
    },
    // 上传文件移除
    removeUploadFile () {
      this.hadFile = false
    },
    // 点击上部的X关闭弹窗时
    handleClose () {
      this.$refs.upload.abort()
      this.$refs.upload.clearFiles()
      this.fileList = []
      this.hadFile = false
      this.$emit('closeUploadDialog')
    },
    // 点击确定按钮时
    handleSubmit () {
      if (this.hadFile) {
        this.$refs.upload.submit()
      } else {
        this.$message({
          message: '请选择需要上传的文件',
          type: 'warning'
        })
      }
    }
  },
  watch: {
    showUploadDialog: {
      handler: function (val, oldVal) {
        this.dialogUploadVisible = val
      },
      deep: true
    }
  }
}
</script>
